{% extends 'base.html' %}
{% load static %}
{% block content %}
    <div class="commod-cont-wrap">
        <div class="commod-cont w1200 layui-clear">
            <div class="left-nav">
                <div class="title">所有分类</div>
                <div class="list-box">
                    {# 遍历视图函数commodityView定义的变量firsts和typesList #}
                    {% for f in firsts %}
                        <dl>
                            <dt>{{ f.firsts }}</dt>
                            {% for t in typesList %}
                                {% if t.firsts == f.firsts %}
                                    <dd>
                                        <a href="{% url 'commodity:commodity' %}?t={{ t.id }}&n={{ n }}">
                                            {{ t.seconds }}
                                        </a>
                                    </dd>
                                {% endif %}
                            {% endfor %}
                        </dl>
                    {% endfor %}
                </div>
            </div>
            <div class="right-cont-wrap">
                <div class="right-cont">
                    <div class="sort layui-clear">
                        {# 设置商品的排序方式，通过判断变量s来控制每个链接的样式设置，每个排序方式都设置了相应的链接 #}
                        {# 所有链接都是指向商品列表页，每个连接的参数t,s,n都不相同 #}
                        <a {% if not s or s == 'sold' %}class="active" {% endif %}
                           href="{% url 'commodity:commodity' %}?t={{ t }}&s=sold&n={{ n }}">
                            销量
                        </a>
                        <a {% if s == 'price' %}class="active" {% endif %}
                           href="{% url 'commodity:commodity' %}?t={{ t }}&s=price&n={{ n }}">
                            价格
                        </a>
                        <a {% if s == 'create' %}class="active" {% endif %}
                           href="{% url 'commodity:commodity' %}?t={{ t }}&s=create&n={{ n }}">
                            新品
                        </a>
                        <a {% if s == 'likes' %}class="active" {% endif %}
                           href="{% url 'commodity:commodity' %}?t={{ t }}&s=likes&n={{ n }}">
                            收藏
                        </a>

                    </div>
                    <div class="prod-number">
                        <a href="javascript:;">商品列表</a>
                        <span>></span>
                        <a href="javascript:;">所有商品</a>
                        <span>></span>
                        <a href="javascript:;">共{{ commodityInfos|length }}个商品</a>
                    </div>
                    <div class="cont-list layui-clear" id="list-cont">
                        {#  遍历变量pages的object_list方法生成商品列表 #}
                        {% for p in pages.object_list %}
                            <div class="item">
                                <div class="img">
                                    <a href="{% url 'commodity:detail' p.id %}">
                                        <img width="280" height="280" src="{{ p.img.url }}">
                                    </a>
                                </div>
                                <div class="text">
                                    <p class="title">{{ p.name }}</p>
                                    <p class="price">
                                        <span class="pri">￥{{ p.price|floatformat:'2' }}</span>
                                        <span class="nub">{{ p.sold }}付款</span>
                                    </p>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {# 使用变量pages的方法实现分页功能列表 #}
            <div id="demo0" style="text-align: center;">
                <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
                    {% if pages.has_previous %}
                        <a href="{% url 'commodity:commodity' %}?t={{ t }}&s={{ s }}&n={{ n }}&p={{ pages.previous_page_number }}"
                           class="layui-laypage-next">
                            上一页
                        </a>
                    {% endif %}

                    {# 变量调用page_range()方法获取数据分页后的总页数，然后在遍历的过程中， #}
                    {# 每次遍历对象page与pages.number进行对比，使用过滤器add自增1或自减1， #}
                    {# 然后与遍历对象page对比，如果判断成功，生成分页按钮 #}
                    {% for page in pages.paginator.page_range %}
                        {% if pages.number == page %}
                            <span class="layui-laypage-curr">
                                <em class="layui-laypage-em">
                                </em>
                                <em>{{ page }}</em>
                            </span>
                        {% elif pages.number|add:'-1' == page or pages.number|add:'1' == page %}
                            <a href="{% url 'commodity:commodity' %}?t={{ t }}&s={{ s }}&n={{ n }}&p={{ page }}">
                                {{ page }}
                            </a>
                        {% endif %}
                    {% endfor %}
                    {% if pages.has_next %}
                        <a href="{% url 'commodity:commodity' %}?t={{ t }}&s={{ s }}&n={{ n }}&p={{ pages.next_page_number }}"
                           class="layui-laypage-next">
                            下一页
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
{% block script %}
    layui.config({
        base: "{% static 'js/' %}"
    }).use(['mm', 'laypage', 'jquery'], function () {
        var laypage = layui.laypage, $ = layui.$,
        mm = layui.mm;
        $('.list-box dt').on('click', function () {
            if ($(this).attr('off')) {
                $(this).removeClass('active').siblings('dd').show()
                $(this).attr('off', '')
            } else {
                $(this).addClass('active').siblings('dd').hide()
                $(this).attr('off', true)
            }
        })
    });
{% endblock script %}